<template>
	<!-- 快店单个店铺样式组件 -->
	<view class="m-shop-item shop-item border-b" @click="goShop">
		<view class="go-btn"></view>
		<view class="close-mask" v-if="shop.is_close == 1 && !shop.is_advance"></view>
		<view class="avatar" >
			<image :src="shop.image" mode="aspectFill" :lazy-load="true"></image>
			<view class="num" :hidden="shop.is_close == 1 || cartNum == 0">{{ cartNum }}</view>
			<view class="tag goLiveIng" v-if="shop.current_liveshow_id && shop.current_liveshow_id != 0"><view class="statusIng"><lang keywords="直播中"></lang></view></view>
			<view class="tag" v-if="shop.isverify == 1 && shop.current_liveshow_id == 0"><lang keywords="已认证"></lang></view>
			<view class="close" v-if="shop.is_close == 1 && !shop.is_advance"><lang keywords="休息中"></lang></view>
		</view>

		<view class="info" >
			<view class="name-box">
				<text class="name">{{ shop.name }}</text>
			</view>
			<view class="line" v-if="shop.is_advance">
				<view class="advance">
					<lang class="left" :style="'background:' + mobile_head_color" keywords="接受预定" chineseTxt="接受预定"></lang>
					<block v-if="shop.next_date && (shop.next_date.date || shop.next_date.time)">
					<lang class="right" v-if="shop.deliver_type != 2" :style="'color:' + mobile_head_color + ';border-color:' + mobile_head_color" keywords="X1后配送" :X1="shop.next_date.date + ' ' + shop.next_date.time" :chineseTxt="(shop.next_date.date + ' ' + shop.next_date.time) + '后配送'"></lang>
					<lang class="right" v-else :style="'color:' + mobile_head_color + ';border-color:' + mobile_head_color" keywords="X1后自提" :X1="shop.next_date.date + ' ' + shop.next_date.time" :chineseTxt="(shop.next_date.date + ' ' + shop.next_date.time) + '后自提'"></lang>
					</block>
				</view>
			</view>
			<view class="line">
				<view class="score-box">
					<block v-if="shop.is_self == 1"><lang class="self-support" keywords="自营"></lang></block>
					<text class="iconfont icon-star"></text>
					<text class="score">{{ shop.star }}</text>
					<block v-if="shop.is_new == 1 || shop.month_sale_count > 0">
						<block v-if="shop.is_new == 1"><lang keywords="新店入驻"></lang></block>
						<block v-else><lang keywords="已售X1" :X1="shop.month_sale_count"></lang></block>
					</block>
				</view>
			</view>
			
			<view class="express-box">
				<text class="other" :style="'background:' + mobile_head_color + ';color:#fff;'" v-if="shop.deliver_type == 0 || shop.deliver_type == 3">
					{{ shop.deliver_name }}
				</text>
				<block v-if="shop.delivery && (shop.deliver_type == 1 || shop.deliver_type == 4)">
					<lang class="self" :style="'color:' + mobile_head_color + ';border:1rpx solid ' + mobile_head_color + ';'" keywords="商家配送"></lang>
				</block>
				<block v-if="shop.delivery && shop.deliver_type == 5">
					<lang class="self" :style="'color:' + mobile_head_color + ';border:1rpx solid ' + mobile_head_color + ';'" keywords="快递配送"></lang>
				</block>
			</view>
			
			<view class="line pt5 po-re" v-if="shop.deliver_type != 2">
				<view class="gather-box">
					<lang keywords="起送" :right="true"></lang>
					{{currency + shop.delivery_price}}</text>
					<block v-if="shop_show_delivermoney">
						<text class="iconfont icon-line"></text>
						<lang keywords="配送" :right="true"></lang>
						<text>{{currency + shop.delivery_money}}</text>
					</block>
				</view>
				<view class="gather-box">
					<text v-if="shop.deliver_type != 2">{{ shop.delivery_time + shop.delivery_time_type }}</text>
					<text class="iconfont icon-line" v-if="shop.deliver_type != 2 && showRange"></text>
					<text v-if="showRange">{{ shop.range }}</text>
				</view>
			</view>
			<view class="shop-type" v-if="shop.preference_desc">{{shop.preference_desc}}</view>
			<view class="shop-type-list" v-if="!shop.preference_desc && shop.category_arr && shop.category_arr.length > 0">
				<text class="iconfont icon-shangdian"></text>
				<text class="type-item" v-for="type in shop.category_arr">{{type}}</text>
			</view>
			<view class="discount-icon">
				<view
					class="self"
					:style="'border-color:' + mobile_head_color + ';color:' + mobile_head_color + ';'"
					v-if="shop.deliver_type == 2 || shop.deliver_type == 3 || shop.deliver_type == 4"
				>
					<lang keywords="门店自提"></lang>
				</view>
				<view :class="item.type" v-for="(item, index2) in shop.coupon_list" :key="index2">{{ item.text }}</view>
			</view>
			<view class="goods-info" v-if="shop.goods_list">
				<view :class="(shop.goods_list.length > 2 ? 'active' : '') + ' ' + (showMore ? 'active-more' : '')">
					<view
						class="goods"
						v-for="(item, index2) in shop.goods_list"
						:key="index2"
						@click.stop="goShopGoods(index2)"
					>
						<image :src="item.image"></image>
						<view class="desc">
							<view class="name">{{ item.name }}</view>
							<view class="num"><lang keywords="已售X1" :X1="item.sell_count" :unit="item.unit"></lang></view>
							<view class="price" v-if="item.sell_type != '2'">
								<view class="seckill_price" v-if="item.is_seckill == 1">
									<view class="discount_info"><text style="margin-right:12rpx;"><lang keywords="限时优惠" chineseTxt="限时优惠"></lang></text><lang keywords="X1折" :X1="item.seckill_discount" :chineseTxt="item.seckill_discount + '折'"></lang></view>
									<view class="">
										<text class="price">{{ currency + item.seckill_price }}</text>
										<text class="del-line">{{ currency + item.price }}</text>
									</view>
								</view>
								<view v-else>
									{{ currency + item.price }}
								</view>
							</view>
							<view class="price" v-else>{{ currency + item.unit_price }}<text class="unit">/斤</text></view>
						</view>
					</view>
				</view>
			
				<view class="show-more" v-if="shop.goods_list.length >= 3" @click.stop="showMoreGoods">
					<view v-if="!showMore">
						<lang keywords="查看其它X1个商品" :X1="shop.goods_list.length - 2"></lang>
						<text class="iconfont icon-xiala"></text>
					</view>
					<view v-if="showMore">
						<lang keywords="收起"></lang>
						<text class="iconfont icon-jiantou1"></text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import common from '../../utils/common.js'
	export default {
		name: 'shopItem',
		data () {
			return {
				config: '',
				currency: '¥',
				mobile_head_color: '',
				shop_show_delivermoney: true,
				showMore: false
			}
		},
		props: {
			shop: {
				type: Object,
				default: {}
			},
			cartNum: {
				type: String,
				default: '0'
			},
			showRange: {
				type: Boolean,
				default: true
			}
		},
		mounted () {
			var _this = this
			common.getConfig(function (config) {
				_this.config = config
				_this.currency = config.config.Currency_symbol
				_this.mobile_head_color = config.config.mobile_head_color
				_this.shop_show_delivermoney = config.config.shop_show_delivermoney
				
			})
		},
		methods: {
			isGo () {
				if (this.shop.goods_list) {
					this.goShop()
				}
			},
			// 查看更多商品
			showMoreGoods () {
				this.showMore = !this.showMore
			},
			goShopGoods (goodsIndex) {
				var goods = this.shop.goods_list[goodsIndex];
				wx.navigateTo({
					url:
						'/pages/shop_new/shopDetail/shopDetail?store_id=' +
						this.shop.store_id +
						'&backgroundColor=' +
						this.shop.shop_fitment_color +
						'&frontColor=' +
						this.shop.shop_fitment_front_color +
						'&sort_id=' +
						goods.sort_id +
						'&goods_id=' +
						goods.goods_id
				});
			},
			goShop () {
				uni.navigateTo({
					url: '/pages/shop_new/shopDetail/shopDetail?store_id=' +
						this.shop.store_id +
						'&backgroundColor=' +
						this.shop.shop_fitment_color +
						'&frontColor=' +
						this.shop.shop_fitment_front_color
				});
			}
		}
	}
</script>

<style scoped>
	
	.m-shop-item{
		position: relative;
		background-color: #fff;
		width:43%;
		padding:20upx !important;
		border-radius: 12px;
	}
			
	.go-btn {
		position: absolute;
		bottom:40upx;
		right:30upx;
		width:38upx;
		height:38upx;
		background: url(gourl-icon.png) no-repeat center;
		background-size: 100%;
	}	
		
	
	.pt5 {
		padding-top: 5px;
	}
	.po-re {
		position: relative;
	}
	
	.shop-item {
		padding: 15px 10px 10px 0;
		position: relative;
		min-height: 70px;
	}
	
	.shop-item .close-mask {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(255, 255, 255, 0.5);
		z-index: 5;
	}
	
	.shop-item .avatar {
		position: relative;
		width:100%;
		height:200upx;
	}
	
	.shop-item .avatar .tag {
		position: absolute;
		top: 0;
		right: 0;
		background: #ffce59;
		color: #aa8023;
		font-size: 10px;
		padding: 0 2px;
		font-weight: bold;
	}
	.shop-item .avatar .tag.goLiveIng{
		background:linear-gradient(90deg,rgba(255,74,42,1),rgba(254,65,64,1));
		border-radius:0px 18px 18px 0px;
		color: #fff;
		right: auto;
		left: 0;
	}
	.shop-item .avatar .tag.goLiveIng .statusIng{
		width: auto;
		background-size: 35rpx 35rpx;
		padding-left: 35rpx;
	}
	
	.shop-item .avatar .num {
		position: absolute;
		bottom: -3px;
		right: -3px;
		background: #ff1940;
		width: 18px;
		height: 18px;
		color: #fff;
		text-align: center;
		line-height: 18px;
		border-radius: 50%;
		font-size: 14px;
	}
	
	.shop-item .avatar image {
		height: 100%;
		width: 100%;
		display: block;
	}
	
	.shop-item .avatar .close {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		background: rgba(252, 251, 251, 0.8);
		color: #555;
		text-align: center;
		font-size: 13px;
	}
	
	.shop-item .info {
		margin-top:20upx;
		box-sizing: border-box;
		overflow: hidden;
	}
	
	.shop-item .info .name-box {
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
		padding-bottom: 3px;
	}
	
	.shop-item .info .self-support {
		font-size: 11px;
		color: #fff;
		background: #fc3e2d;
		padding: 0 4px;
		border-radius: 2px;
		margin-right: 5px;
		white-space: nowrap;
		vertical-align: middle;
		display: inline-block;
		margin-top: -3px;
		line-height: 1.6;
	}
	
	.shop-item .info .name {
		font-weight: bold;
	}
	
	.shop-item .info .line {
		line-height: 20px;
		font-size: 12px;
		color: #666;
	}
	
	.shop-item .info .text-overflow {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.shop-item .info .line .advance {
		margin-bottom: 5px;
		font-size: 11px;
	}
	.shop-item .info .line .advance .left{
		color: #fff;
		padding: 1px 4px;
		border-radius: 2px 0 0 2px;
	}
	.shop-item .info .line .advance .right{
		border: 1px solid #fff;
		padding: 0 4px;
		border-radius: 0 2px 2px 0;
	}
	
	.shop-item .info .line .tag {
		white-space: nowrap;
	}
	
	.shop-item .info .line .score-box {
		display: flex;
		align-items: center;
		line-height: 20px;
	}
	
	.shop-item .info .line .score-box .icon-star {
		color: #ffc900;
		font-size: 12px;
		margin-right: 5px;
	}
	
	.shop-item .info .line .score {
		color: #333;
		margin-right: 10px;
	}
	
	.shop-item .info .line .score-box wux-rater {
		margin-bottom: 2px;
		white-space: nowrap;
	}
	
	.shop-item .info .line .gather-box {
		width:100%;
	}
	
	.shop-item .info .line .gather-box .gap {
		margin: 0 4px;
		color: #ddd;
	}
	
	.shop-item .info .line .icon-line {
		font-size: 14px;
	}
	
	.shop-item .info .line .express-box text {
		margin-left: 5px;
		font-size: 11px;
		padding: 3px;
		border-radius: 2px;
	}
	
/* 	.shop-item .info .line .express-box .other {
		font-size:12px;
		background: #06c1ae;
		color: #fff;
		padding: 2px 3px;
		margin:100upx 0;
	} */
	
	.express-box .other {
		margin: 30upx 0;
		font-size:12px;
		padding: 6upx 10upx;
	}
	
	.shop-item .info .line .express-box .self {
		color: #06c1ae;
		border: 1rpx solid #c5f3ef;
		margin-left: 5px;
		padding: 1px 3px;
		font-size: 11px;
	}
	
	.shop-item .info .line .express-box .self text {
		margin-left: 0;
	}
	
	.shop-item .info .line .tag {
		border-radius: 2px;
		margin-right: 5px;
		padding: 0 2px;
	}
	
	.shop-item .info .sale-box .iconfont {
		padding: 0 5px;
	}
	
	/* 发票 */
	.invoice {
		color: #06c1ae;
		border: 1rpx solid #c5f3ef;
	}
	
	/* 平台首单优惠 平台优惠 */
	.system_newuser,
	.system_minus {
		color: #aa8023;
		border: 1rpx solid #f3e5c6;
	}
	
	/* 打折 部分商品限时优惠  部分商品分类折扣优惠 配送费优惠 店铺首单优惠 店铺优惠 */
	.discount,
	.isdiscountgoods,
	.isdiscountsort,
	.delivery,
	.newuser,
	.delivery_free,
	.minus,
	.full_gift {
		color: #ff3e4a;
		border: 1rpx solid #fce5e7;
	}
	
	.discount-icon {
		display: flex;
		flex-wrap: wrap;
		padding-top: 8px;
	}
	
	.discount-icon > view {
		margin-right: 5px;
		margin-bottom: 5px;
		font-size: 11px;
		padding: 0 3px;
		border-radius: 2px;
	}
	
	.shop-item .info .discount-icon .self {
		color: #06c1ae;
		border: 1rpx solid #c5f3ef;
	}
	
	.shop-item .info .discount-icon .self-support {
		background: #ff3e4a;
		color: #fff;
	}
	.shop-type{
		display: inline-block;
		font-size: 12px;
		color: #E29448 ;
		background: #FDF8E0;
		padding: 1px 4px;
		border-radius: 2px;
		margin-top: 5px;
		white-space: nowrap;
	}
	
	.shop-type-list{
		font-size: 12px;
		padding-top: 5px;
		color: #666;
	}
	.shop-type-list .iconfont{
		font-size: 14px;
		margin-right: 5px;
	}
	
	.shop-type-list .type-item {
		margin-right: 5px;
	}
	
	.shop-item .goods {
		margin-top: 10px;
		display: flex;
	}
	.shop-item .goods image {
		width: 70px;
		height: 70px;
		margin-right: 5px;
		border: 1rpx solid #f8f8f8;
	}
	.shop-item .goods .desc {
		width: calc(100% - 75px);
		height: 70px;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	.shop-item .goods .desc .name {
		font-size: 14px;
		color: #333;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		width: 100%;
		display: inline-block;
		margin-bottom: 0;
	}
	.shop-item .goods .desc .num {
		font-size: 12px;
		color: #666;
	}
	.shop-item .goods .desc .price {
		font-size: 16px;
		color: #e23321;
	}
	.shop-item .goods .desc .price .unit{
		font-weight:normal;
		font-size:14px;
		margin-left:2px;
	}
	.shop-item .goods .desc .price .discount_info{font-weight: normal;font-size: 12px;}
	.shop-item .goods .desc .price .del-line{font-size: 12px;text-decoration: line-through;color: #999;font-weight: normal;margin-left: 6px;}
	
	.shop-item .show-more {
		font-size: 14px;
		color: #333;
		margin-top: 10px;
	}
	.shop-item .goods-info .active {
		height: 165px;
		overflow: hidden;
	}
	.shop-item .goods-info .active-more {
		height: auto;
		overflow: hidden;
	}
	
	.border-b::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 0;
		height: 1rpx;
		width: 100%;
		background: #e5e5e5;
		transform: scaleY(0.5);
	}
</style>
